<template>
  <section>
    <div class="model retrieval">
      <img :src="IMGBASE64.JIANSUOGUANLI2X" class="orange">
      <span class="title">检索管理</span>
      <div class="body">
        <span>学校名称:</span>
        <el-select value-key="value" v-model="nameSelect" style='width: 20%;' clearable size="small">
          <el-option v-for="item in nameOption" :label="item.name" :value="item.value"></el-option>
        </el-select>
        <el-button type="primary" size="small" @click="getData">确定</el-button>
        <div class="right">
          <el-button type="success" size="small" @click="newShow">新建</el-button>
        </div>
      </div>
    </div>

    <div class="model list">
      <img :src="IMGBASE64.XIAOCHEXIANLU2X" class="pink">
      <span class="title">学校管理员</span>
      <div class="kong"></div>
      <el-table :data="tableData" style="width: 100%" @cell-click="showDetails">
        <el-table-column prop="schoolId" label="#" min-width="30" align="center"></el-table-column>
        <el-table-column prop="schoolName" label="学校名称" min-width="" align="center" :show-overflow-tooltip='true'></el-table-column>
        <el-table-column prop="name" label="姓名" min-width="" align="center"></el-table-column>
        <el-table-column prop="idNo" label="登录账号" min-width="" align="center" :show-overflow-tooltip='true'></el-table-column>
        <el-table-column prop="password" label="登录密码" min-width="" align="center" :show-overflow-tooltip='true'></el-table-column>
        <el-table-column label="操作" align="center" min-width="">
          <template scope="scope">
            <el-button size="small">修改</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        v-show="paging"
        @current-change="handleCurrentChange"
        :page-size="20"
        layout="prev, pager, next, jumper"
        :total="total"
        class="pull-right">
      </el-pagination>
    </div>

    <div class="details" v-show="bukexiugai">
      <img :src="IMGBASE64.XIANGQING2X" class="icon">
      <span class="title">详情</span>
      <el-button icon="el-icon-close" class="close" @click="upShowBU()"></el-button>
        <div class="content">
        <div class="kong"></div>
        <el-form label-width="90px">
          <el-col :span="24">
            <el-form-item label="学校名称">
              <span>{{form.schoolName}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="9">
            <el-form-item label="学校管理员">
              <span>{{form.name}}</span>
            </el-form-item>  
          </el-col>
          <el-col :span="9">
            <el-form-item label="登录账号">
              <span>{{form.idNo}}</span>
            </el-form-item>  
          </el-col>
          <el-col :span="9">
            <el-form-item label="登录密码">
              <span>{{form.password}}</span>
            </el-form-item>  
          </el-col>
        </el-form>
      </div>
    </div>
    <div class="details" v-show="kexiugai">
      <img :src="IMGBASE64.XIANGQING2X" class="icon">
      <span class="title">修改</span>
      <el-button icon="el-icon-close" class="close" @click="upShow()"></el-button>
      <div class="content">
        <el-form label-width="90px">
          <el-col :span="24">
            <el-form-item label="学校名称">
              <input type="text" class="text" :disabled="true" v-model="xiugaiNameSelect">
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="学校管理员">
              <input type="text" class="text" v-model="form.name">
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="登录账号">
              <input type="text" class="text" v-model="form.idNo">
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="登录密码">
              <input type="text" class="text" v-model="form.password">
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <div class="bottom">
              <button class="btn btn-danger" @click="changeData">确认</button>
            </div>
          </el-col>
        </el-form>
      </div>
    </div>

    <div class="up" v-show="newshow">
      <img :src="IMGBASE64.GREENXINZENG2X" class="img">
      <span class="title">新增学校管理员</span>
      <el-button icon="el-icon-close" class="close" @click="newShow()"></el-button>
      <div class="header">
        <span class="title">基本信息</span>
      </div>
      <div class="content">
        <el-form ref="form" :model="form" label-width="86px">
          <el-col :span="13">
            <el-form-item label="学校名称:">
              <el-select v-model="newNameSelect" size="small" style='width: 64%;'>
                <el-option
                  v-for="item in nameOption"
                  :label="item.name"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="学校管理员:">
              <input type="text" v-model="name">
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="登录账号:">
              <input type="text" v-model="idNo">
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="登录密码:">
              <input type="text" v-model="password">
            </el-form-item>
          </el-col>
        </el-form>
      </div>
      <el-col :span="24">
        <div class="bottom">
          <div class="right">
            <el-button type="success" @click="subNew()" size="small">确定</el-button>
            <el-button @click="newShow()" size="small">取消</el-button>
          </div>
        </div>
      </el-col>
    </div>
    <transition name="modal-shadow">
      <div class="modal-backdrop" v-show="upshow"></div>
    </transition>
  </section>
</template>

<script>
export default {
  data () {
    return {
      total: 0,
      page: 1,
      paging: true,
      bukexiugai: false,
      kexiugai: false,
      upshow: false,
      newshow: false,
      imgshow: false,
      nameSelect: null,
      newNameSelect: null,
      xiugaiNameSelect: null,
      nameOption: [],
      schoolName: null,
      schoolId: null,
      name: null,
      idNo: null,
      password: null,
      tableData: [],
      form: {
        schoolName: null,
        name: null,
        idNo: null,
        password: null
      }
    }
  },
  mounted () {
    this.$http.post(this._httpUrl + 'sys/school/manage/schoolList', {}, {'headers': {'yxt-xtoken': localStorage.xtoken}}).then(function (response) {
      if (response.body.code === '000') {
        this.tableData = response.data.data
        let asdf = []
        for (var i = 0; i < this.tableData.length; i++) {
          asdf.push({
            name: this.tableData[i].schoolName,
            value: this.tableData[i].id
          })
        }
        this.nameOption = asdf
      } else if (response.body.code === '887') {
        this.$router.push('/')
      } else if (response.body.code === '889') {
        this.$router.push('/')
      }
    })
    this.$http.post(this._httpUrl + 'sys/schoolManager/page/query', {}, {'headers': {'yxt-xtoken': localStorage.xtoken}}).then(function (response) {
      if (response.body.code === '000') {
        this.tableData = response.data.data.results
      } else if (response.body.code === '887') {
        this.$router.push('/')
      } else if (response.body.code === '889') {
        this.$router.push('/')
      }
    })
  },
  methods: {
    getData () {
      this.$http.post(this._httpUrl + 'sys/schoolManager/page/query', {page: (this.page), rows: 20, schoolId: this.nameSelect}, {'headers': {'yxt-xtoken': localStorage.xtoken}}).then(function (response) {
        if (response.body.code === '000') {
          this.tableData = response.data.data.results
        } else if (response.body.code === '887') {
          this.$router.push('/')
        } else if (response.body.code === '889') {
          this.$router.push('/')
        }
      })
    },
    subNew () {
      this.$http.post(this._httpUrl + 'sys/schoolManager/add', {
        schoolId: this.newNameSelect,
        name: this.name,
        idNo: this.idNo,
        password: this.password

      }, {'headers': {'yxt-xtoken': localStorage.xtoken}}).then(function (response) {
        if (response.body.code === '000') {
          this.newNameSelect = null
          this.name = null
          this.idNo = null
          this.password = null
          this.newshow = !this.newshow
          this.upshow = !this.upshow
          this.getData()
        } else if (response.body.code === '887') {
          this.$router.push('/')
        } else if (response.body.code === '889') {
          this.$router.push('/')
        }
      })
    },
    handleCurrentChange (val) {
      this.page = val
      this.getData()
    },
    upShowBU () {
      this.upshow = !this.upshow
      this.bukexiugai = !this.bukexiugai
    },
    upShow () {
      this.upshow = !this.upshow
      this.kexiugai = !this.kexiugai
    },
    newShow () {
      this.newshow = !this.newshow
      this.upshow = !this.upshow
      this.nameSelect = null
    },
    imgShow () {
      this.upshow = !this.upshow
      this.imgshow = !this.imgshow
    },
    showDetails (rows, column) {
      if (column.label === '操作') {
        this.upshow = !this.upshow
        this.kexiugai = !this.kexiugai
        this.xiugaiNameSelect = rows.schoolName
        this.form.id = rows.id
        this.form.name = rows.name
        this.form.idNo = rows.idNo
        this.form.password = rows.password
        this.schoolName = rows.schoolName
      } else {
        this.upshow = !this.upshow
        this.bukexiugai = !this.bukexiugai
        this.form.schoolName = rows.schoolName
        this.form.name = rows.name
        this.form.idNo = rows.idNo
        this.form.password = rows.password
      }
    },
    changeData () {
      this.$http.post(this._httpUrl + 'sys/schoolManager/update', {id: this.form.id, name: this.form.name, idNo: this.form.idNo, password: this.form.password}, {'headers': {'yxt-xtoken': localStorage.xtoken}}).then(function (response) {
        if (response.body.code === '000') {
          this.getData()
          this.kexiugai = !this.kexiugai
          this.upshow = !this.upshow
        } else if (response.body.code === '887') {
          this.$router.push('/')
        } else if (response.body.code === '889') {
          this.$router.push('/')
        }
      })
    }
  }
}
</script>

<style scoped>
  div[data-v-05da9316] ul
  {
    position: relative;
    left: 12%;
  }
  .el-upload--picture-card
  {
    /*margin-left: 16%;*/
    margin-top: 40px;
    width: 80px; height: 80px;
  }
  .el-upload--picture-card i
  {
    position: relative; top: -28px;
  } 
</style>

<style lang="less" scoped>
@import '/static/css/all-use.css';
@import '/static/css/material-dashboard.css';
  .retrieval{
    .body{
      span{
        margin-left: 4%;
      }
      span:first-child{
        margin-left: 0;
      }
      .firstSelect{
        width: 15%;
        border: 0;
        border-bottom: 1px solid #D7D7D7;
      }
      .select{
        width: 15%;
        border: 0;
        border-bottom: 1px solid #D7D7D7;
      }
      input{
        margin-left: 4%;
        border: 0;
        border-bottom: 1px solid #D7D7D7;
      }
      .right{
        width: 8%;
        float: right;
      }
    }
  }
  .details{
    .content{
      margin-left: 4%;
    }
    .text{
      border: 0;
      border-bottom: 1px solid #d7d7d7;
    }
    .text:disabled{
      background: #fff;
      border: 0;
    }
    .bottom{
      text-align: center;
    }
  }

  .up{
    width: 54% !important;
    position: fixed !important;
    top: 10% !important;
    left: 50% !important;
    margin-left: -27% !important;
    background: #FFF !important;
    padding: 20px 20px 0 20px !important;
    border-radius: 5px !important;
    z-index: 99999 !important;
    .img{
      position: absolute;
      left: 24px;
      top: -25px;
    }
    .title{
      margin-left: 96px;
    }
    .header{
      height: 24px;
      border-bottom: 2px solid #D7D7D7;
      padding: 30px 0 10px 0;
      margin-left: 1%;
      margin-right: 10px;
      margin-bottom: 10px;
      .title{
        height: 24px;
        color: #FB7862;
        border-bottom: 2px solid #FB7862;
        padding: 0 10px 10px 10px;
        margin-left: 0;
      }
    }
    .content{
      margin-left: 3%;
      margin-top: 30px;
      input{
        width: 70%;
        border: 0;
        border-bottom: 1px solid #d7d7d7;
      }
      select{
        width: 70%;
        border: 0;
        border-bottom: 1px solid #d7d7d7;
      }
    }
    .bottom{
      border-top: 1px solid #D7D7D7;
      margin-top: 20px;
      background: #F8F8F8;
      padding: 8px 0;
      margin-left: -20px;
      margin-right: -20px;
      border-radius: 0 0 5px 5px;
      .right{
        text-align: right;
        margin-right: 4%;
      }
    }
    .green{
      width: 64px;
      height: 64px;
      position: absolute;
      left: 3%;
      top: -20px;
      background: #0DBF9B;
      border-radius: 4px;
      text-align: center;
      line-height: 80px;
    }
  }

  .imgup{
    width: 20%;
    height: 100px;
    position: fixed;
    top: 100px;
    left: 50%;
    margin-left: -10%;
    background: #FFF;
    border-radius: 5px;
    padding: 20px;
    z-index: 99999;
    .erweima{
      width: 100px;
      height: 100px;
      position: absolute;
      left: 50%;
      margin-left: -50px;
    }
  }
</style>
